<template>
  <div>
    <el-form :inline="true" class="demo-form-inline" v-model="data.searchData">
      <el-form-item label="规则名称">
        <el-input v-model="data.searchData.ruleName" placeholder="规则名称"></el-input>
      </el-form-item>
      <el-form-item label="显示空间">
        <yu-select select dictCode="sysSpaceList" v-model:value="data.searchData.spaceId" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getMenu">查询</el-button>
        <el-button type="primary" @click="addBtn">新增</el-button>
        <el-button type="primary" @click="editBtn">修改</el-button>
        <el-button type="primary" @click="initMenu">初始化菜单</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="data.tableData" style="width: 100%; margin-bottom: 20px" row-key="menuName">
      <el-table-column prop="menuName" label="菜单名称" width="auto" />
      <el-table-column prop="menuCode" label="菜单编码" width="auto" />
      <el-table-column prop="routerPath" label="访问路径" width="auto" />
      <el-table-column prop="filePath" label="组件路径" width="auto" />
      <el-table-column prop="orderNum" label="排序" width="auto" />
      <el-table-column prop="spaceName" label="所在模块" width="auto" />
      <el-table-column fixed="right" label="操作" width="auto">
        <template #default="scope">
          <el-button type="text" size="small" @click="editBtn(scope.row)">修改</el-button>
          <el-button type="text" size="small" @click="delMenu(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <yu-dialog :data="data.editDilog" v-model:isShow="data.eidt">
      <edit-menu :menuData="data.menuData" @getMenu="getMenu" :sysSpace="cosSpace" v-model:isShow="data.eidt"></edit-menu>
    </yu-dialog>
  </div>
</template>

<script setup>
  import { ref, getCurrentInstance, onMounted, reactive } from 'vue';
  import editMenu from './EditMenu.vue';

  const data = reactive({
    cosSpace: [],
    tableData: [],
    editDilog: {},
    menuData: {},
    searchData: {},
    eidt: false,
  });
  let { proxy } = getCurrentInstance();
  const getMenu = async () => {
    proxy.$api.menu.querySysMenu(data.searchData).then(res => {
      data.tableData = res; //更新数据
    });
  };
  const delMenu = row => {
    proxy
      .$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then(() => {
        proxy.$api.menu.deleteMenu(row).then(res => {
          if (res.code != -1) {
            getMenu();
            proxy.$message({
              type: 'success',
              message: res.msg,
            });
          } else {
            proxy.$message({
              type: 'error',
              message: res.msg,
            });
          }
        });
      });
  };

  onMounted(() => {
    //菜单查询
    getMenu();
  });
  //初始化菜单路由
  const initMenu = () => {
    proxy.$store.dispatch('initMenu', true);
  };

  //新增菜单按钮
  const addBtn = () => {
    data.eidt = true;
    data.editDilog.title = '菜单编辑';
    data.editDilog.width = '800px';
    data.menuData = {
      menuType: '1',
      isStop: '0',
      menuHidden: '0',
      isCache: '0',
    };
  };
  //修改
  const editBtn = row => {
    data.eidt = true;
    data.editDilog.title = '菜单编辑';
    data.editDilog.width = '800px';
    data.menuData = row;
  };
</script>

<style scoped lang="scss"></style>
